<?php
$this->breadcrumbs = array(
    'Experiments' => array('index'),
    $model->ID,
);

$this->menu = array(
    array('label' => 'List Experiment', 'url' => array('index')),
    array('label' => 'Create Experiment', 'url' => array('create')),
    array('label' => 'Update Experiment', 'url' => array('update', 'id' => $model->ID)),
    array('label' => 'Delete Experiment', 'url' => '#', 'linkOptions' => array('submit' => array('delete', 'id' => $model->ID), 'confirm' => 'Are you sure you want to delete this item?')),
    array('label' => 'Manage Experiment', 'url' => array('admin')),
);
?>

<h1>View Experiment #<?php echo $model->ID; ?></h1>

<?php
$this->widget('zii.widgets.CDetailView', array(
    'data' => $model,
    'attributes' => array(
        array(// related city displayed as a link
            'label' => 'User',
            'type' => 'raw',
            'value' => CHtml::link(CHtml::encode($model->oUser->username), array('user/view', 'id' => $model->oUser->id)),
        ),
        'date_start',
        'date_finish',
    ),
));

echo '<br/>';
echo '<br/>';

require 'graph_1.php';
require 'graph_2.php';
require 'graph_3.php';
require 'graph_4.php';
require 'graph_5.php';
require 'graph_6.php';



/*
  ?>
  <canvas id="graphOne" width="1100" height="500" ></canvas><br/>
  <script type="text/javascript">
  //массив точек с описаниями
  var data = {'graph': [
  {'point': [
  {"val": "-16,15"},
  <?
  foreach($ar[1] as $num=>$item){
  echo '{"val": ' . $item . ', "gval":"' . $item . 'n", "desc": "Строка ' . $num . '"},';
  }
  ?>
  ],
  'properties':{
  'linecolor':'#8cb9c8', //цвет линий соединящих точки графика
  'pointcolor':'#8cb9c8', //цвет точек
  'spacecolor':'#8cb9c8', //цвет области под графиком
  'linewidth':1, //толщина линий соединяющие точки
  'pointradius':1, //радиус точек
  'spacealpha':0.1, //степень прозрачности области под графиком
  'activepointwidth':2 //радиус активной точки
  }
  }]};

  //массив с основными настройками
  var properties = {
  "background":"#ffffff", //общий фон
  "linescolor":"#dbdbdb", //цвет сетки
  "lineswidth":1, //ширина линий сетки
  "gridwidth":141, //минимальное расстояние между вертикальными линиями
  "gorizontfontcolor":"#969696", //цвет текста на горизонтальных линиях
  "verticalfontcolor":"#969696", //цвет текста на вертикальных линиях
  "gorizontfont":"bold 11px Arial", //шрифт на горизонтальных линиях
  "verticalfont":"bold 11px Arial", //шрифт на вертикальных линиях
  };

  //массив для настройки вида вспывающих подсказок
  var hints = {
  'background':'#4a4a4a', //фон подсказки
  'bordercolor':'#000', //цвет границы
  'borderwidth':2, //ширина границы
  'paddingtb':1, //отступы сверху и снизу
  'paddinglr':1, //отступы слева и справа
  'borderradius':6, //закругленность прямоугольника
  'lineheight':1, //расстояние между строками
  'font':[ //шрифты построчно
  {'color':'#fff','font':'bold 12px Verdana'}//первоя строка
  ]
  };
  plotgraph('#graphOne',data,properties,hints);
  </script>

  <? */
?>
<div style="width: 300px; float: left">
  <h4>Params</h4>
  <!--<p>inerval: <input class="graphParam" size='1' type="text" id="inerval" value="1"/></p>-->
  <p>lineWidth: <input class="graphParam" size='1' type="text" id="lineWidth" value="1"/></p>
  <p>scale Y: 1:<input class="graphParam" size='1' type="text" id="scaleY" value="3"/></p>
<!--  <p>scale X: 1:<input class="graphParam" size='1' type="text" id="scaleX" value="5"/></p>-->
  <p>range: <input class="graphParam" type="text" id="range1" size='1' value="-30"/><input class="graphParam" type="text" size='1' id="range2" value="30"/></p>
</div>

<div style="width: 300px; float: left">
  <h4>Params</h4>
  <p>showdots: <input class="graphParam" type="checkbox"  id="showdots"/></p>
  <p>showlabels: <input class="graphParam" type="checkbox" id="showlabels"/></p>
</div>

<div style="width: 300px; float: left">
  <h4>Processing</h4>
  <span>filter
    <select>
      <option></option>
      <option>150 Hz</option>
      <option>35 Hz</option>
      <option>Режекторная фильтрация 50 Hz</option>
    </select>
  </span>
</div>
<script type="text/javascript">
  var g_graph = [];
</script>
<div style="clear: both;"></div>
<?
foreach ($ar as $key => $arData) {
  ?>
  <p>Chanel:<?= $key+1 ?>;  max:<?= max($arData); ?>µV; min: <?= min($arData); ?>µV; Curent value: <span id="curVal<?= $key ?>">0</span>µV<p>
  <canvas width="1100" height="150" id="graph<?= $key ?>"></canvas>
  <script type="text/javascript">
    var array_data<?= $key ?> = new Array(<?= join(', ', $arData) ?>);
    function graph(){
      g_graph[<?= $key ?>] = new Graph(
      {
        'id': "graph<?= $key ?>",
        'strokeStyle' :	"#333333",
        'gridcolor' : "#EEE",
        'background' : "#fff",
        'fillStyle' :	"rgba(204,204,204,0.25)",
        'interval': 2,
        'lineWidth': getParams('lineWidth'),
        'grid' : [0.5,0.5],
        'range':[getParams('range1'),getParams('range2')],
        'showdots': getParams('showdots'),
        'showlabels': getParams('showlabels'),
        'call': function(){/*array_data1.shift();array_data1.shift();*/var cur = array_data<?= $key ?>.shift(); $('#curVal<?= $key ?>').text(cur); return (cur);}
      });
    }
  function getParams(param) {
    switch(param){
      case 'inerval':
        return $("#inerval").val();
      case 'lineWidth':
        return $("#lineWidth").val();
      case 'range1':
        return $("#range1").val();
      case 'range2':
        return $("#range2").val();
      case 'lineWidth':
        return $("#lineWidth").val();
      case 'showlabels':
        return $("#showlabels").is(':checked');
      case 'showdots':
        return $("#showdots").is(':checked');
      case 'scaleY':
        return $("#scaleY").val();
      case 'scaleX':
        return $("#scaleX").val();
    }
  }
    graph();
    $(".graphParam").live("change", function(){
      for (x in g_graph)
      {
        g_graph[x].scale = getParams('scaleY');
        //g_graph[x].grid_x = getParams('scaleX');
        
        g_graph[x].inerval = getParams('inerval');
        g_graph[x].lineWidth = getParams('lineWidth');
        //console.log([getParams('range1'),getParams('range2')]);
        g_graph[x].range = [getParams('range1'),getParams('range2')];
        g_graph[x].lineWidth = getParams('lineWidth');
        g_graph[x].showlabels = getParams('showlabels');
        g_graph[x].showdots = getParams('showdots');
      }
    });   
  </script>
  <?
  if ($key > 21)
    break;
}
?>
